<template>
	<div class="h-table-container">
		<!-- 表格本体 -->
		<el-table
			ref="tableRef"
			:data="data"
			:border="config.isBorder"
			:size="themeConfig.globalComponentSize"
			:default-expand-all="config.isExpandAll"
			v-bind="$attrs"
			v-loading="config.loading"
			row-key="id"
			style="width: 100%"
			@row-click="onRowClick"
			@selection-change="onSelectionChange"
		>
			<!-- 选中标识 -->
			<el-table-column
				v-if="config.isSelection"
				type="selection"
				align="center"
				:resizable="false"
				:reserve-selection="true"
				:width="selecWidth[themeConfig.globalComponentSize]"
			/>
			<!-- 展开行 -->
			<el-table-column
				v-if="config.isRowExpand"
				type="expand"
				align="center"
				:resizable="false"
				:width="selecWidth[themeConfig.globalComponentSize]"
			>
				<template v-slot="scope">
					<slot name="expandRow" :scope="scope"></slot>
				</template>
			</el-table-column>
			<!-- 行序号 -->
			<el-table-column
				v-if="config.isSerialNo"
				type="index"
				label="序号"
				align="center"
				:resizable="false"
				:width="indexWidth[themeConfig.globalComponentSize]"
			/>
			<!-- 自定义 -->
			<el-table-column
				v-for="(item, index) in setHeader"
				:key="index"
				:prop="item.key"
				:label="item.title"
				:align="item.align"
				:header-align="item.headerAlign"
				:width="item.colWidth"
				:resizable="item.resizable"
				:show-overflow-tooltip="item.showTooltip || false"
			>
				<template v-slot="scope">
					<template v-if="item.type === 'text'">
						{{ scope.row[item.key] ? (item.prefix || "") + scope.row[item.key] + (item.subfix || "") : "" }}
					</template>
					<template v-else-if="item.type === 'mapOpt'">
						{{ item.mapOpt ? item.mapOpt[scope.row[item.key]] : scope.row[item.key] }}
					</template>
					<template v-else-if="item.type === 'image'">
						<el-image
							:style="{ width: `${item.picWidth}px`, height: `${item.picHeight}px` }"
							:fit="item.picFitType || 'cover'"
							:src="scope.row[item.key]"
							:preview-src-list="[scope.row[item.key]]"
							:preview-teleported="true"
						/>
					</template>
					<template v-else-if="item.type === 'customCell'">
						<slot :name="item.slotName" :scope="scope"></slot>
					</template>
				</template>
			</el-table-column>
			<!-- 操作栏 -->
			<el-table-column
				v-if="config.isOperate"
				label="操作"
				header-align="center"
				:resizable="false"
				:width="config.opWidth"
			>
				<template v-slot="scope">
					<el-space wrap :size="5">
						<slot name="operation" :scope="scope"></slot>
					</el-space>
				</template>
			</el-table-column>
			<!-- 表格数据为空时 -->
			<template v-slot:empty>
				<el-empty description="暂无数据" />
			</template>
		</el-table>
		<!-- 表格下方 -->
		<div class="h-table-footer">
			<!-- 分页操作 -->
			<el-pagination
				v-if="config.isPagination"
				class="mt10"
				:current-page="props.pageNum"
				:page-size="props.pageSize"
				:pager-count="7"
				:page-sizes="[5, 10, 15, 20, 30, 50]"
				:total="config.total"
				:small="themeConfig.globalComponentSize === 'small'"
				layout="total, sizes, prev, pager, next, jumper"
				background
				@current-change="onCurrentChange"
				@size-change="onSizeChange"
			/>
			<!-- 其它功能 -->
			<div class="h-table-footer-tool">
				<slot name="footerTool"></slot>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts" name="table">
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
import { useThemeConfig } from "/@/stores/themeConfig";

// 定义父组件传过来的值
interface TableProps {
	config: TableConfigType; // 配置项
	header: TableHeaderType[]; // 表头内容
	data: EmptyObjectType[]; // 表格内容
	selectedRows: EmptyObjectType[]; // 表格选中行
	pageNum?: number; // 当前页码
	pageSize?: number; // 每页显示条数
}
const props = withDefaults(defineProps<TableProps>(), {
	pageNum: 1,
	pageSize: 10,
});

// 定义父组件可触发的事件
const emit = defineEmits(["update:selectedRows", "pageChange", "rowClick"]);

// 定义页面变量
const { themeConfig } = storeToRefs(useThemeConfig());
const tableRef = ref();
// 选中标识的列宽
const selecWidth = {
	large: 45,
	default: 40,
	small: 35,
};
// 序号的列宽
const indexWidth = {
	large: 65,
	default: 60,
	small: 50,
};

// 过滤出要显示的表格 header 数据
const setHeader = computed(() => {
	return props.header.filter(v => v.isCheck);
});
// 表格行 - 点击事件
const onRowClick = (row: EmptyObjectType, column: EmptyObjectType) => {
	emit("rowClick", row, column);
	if (props.config.isRowExpand && props.config.isClickExpand) tableRef.value.toggleRowExpansion(row);
};
// 表格多选 - 更新选中值
const onSelectionChange = (val: EmptyObjectType[]) => {
	emit("update:selectedRows", val);
};
// 分页改变 - page
const onCurrentChange = (val: number) => {
	emit("pageChange", {
		page: val,
		limit: props.pageSize,
	});
};
// 分页改变 - pageSize
const onSizeChange = (val: number) => {
	emit("pageChange", {
		page: props.pageNum,
		limit: val,
	});
};
</script>

<style scoped lang="scss">
.h-table-container {
	display: flex;
	flex-direction: column;
	.el-table {
		flex: 1;
	}
	.h-table-footer {
		display: flex;
		padding: 0 4px;
		.h-table-footer-tool {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
}
</style>
